<template>
	<view>
		<u-navbar title="订单详情" back-icon-color="#000" title-color="#000" :title-bold="true" :immersive="true"
			:border-bottom="false" :background="{background:'none'}"></u-navbar>
		<view class="m-head" :style="{paddingTop:navbarHeight + 'px',height:detail.status ==-5 || detail.status ==2 || detail.status == 3?'400rpx' :'355rpx'}">
			<view class="u-flex u-m-l-25 u-m-r-25" >
				<block v-if="detail.status ==-5">
					<image src="@/static/order/daizhifu.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
					<text class="m-font1 u-m-l-20">待支付</text>
				</block>
				<text class="m-font1" v-if="detail.status ==-1">已取消</text>
				<text class="m-font1" v-if="detail.status ==2">待入住</text>
				<text class="m-font1" v-if="detail.status ==3">入住中</text>
				<text class="m-font1" v-if="detail.status ==4">已完成</text>
			</view>
			<view class="u-flex u-row-between u-m-l-25 u-m-r-25 u-m-t-20" v-if="detail.status ==-5">
				<text class="m-font2" style="color: #DE2C38;">订单需在下单后30分钟内完成支付，超时将会自动取消</text>
			</view>
			<view class="u-flex u-row-between u-m-l-25 u-m-r-25 u-m-t-20" v-if="detail.status ==2">
				<text class="m-font2" style="color: #8F6F4C;">请于入住日中午14:00后办理入住，提前到店视酒店空房情况安排</text>
			</view>
			<view class="u-flex u-row-between u-m-l-25 u-m-r-25 u-m-t-20" v-if="detail.status ==3">
				<text class="m-font2" style="color: #8F6F4C;">离店请至酒店前台办理押金退还，并领取礼品</text>
			</view>
			<view class="m-head-box">
				<view class="m-head-box__top">
					<view class="m-head-box__left">
						<text>订单金额</text>
						<text class="m-head-font1">{{detail.price || 0}}</text>
					</view>
					<view class="m-head-font2" @click="openDetailFun">
						<text class="u-flex-1 u-m-r-5">费用明细</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="m-head-box__bottom">
					<view class="m-head-bottom__left u-line-1">
						<text>{{replaceText(detail.hotal.content || '')}}</text>
					</view>
					<view class="m-head-font2" @click="show=true">
						<text class="u-flex-1 u-m-r-5">酒店政策</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="m-head-empty"></view>
		</view>
		<view class="m-card">


			<view class="m-title">
				<text>预定信息</text>
				<!-- <view class="m-title-code" v-if="detail.status > 0" @click="getCodeInfo">
					<text>核销码</text>
					<u-icon name="arrow-right"></u-icon>
				</view> -->
			</view>
			<view class="m-hotel" v-if="detail.hotal">
				<view class="m-hotel-image">
					<image :src="detail.hotal.img" mode="aspectFill"></image>
				</view>
				<view class="m-hotel-content">
					<view class="u-flex">
						<view class="m-hotel-title">
							<text>{{detail.hotal.title}}</text>
						</view>
						<!-- <image src="@/static/index/icon-right.png" mode=""></image> -->
					</view>
					<view class="u-flex u-m-t-20">
						<view class="m-hotel-address">
							<text>{{detail.hotal.peisong_area}}{{detail.hotal.address}}</text>
						</view>
						<view class="m-hotel-copy u-m-l-10"
							@click="clickCopy(detail.hotal.peisong_area + detail.hotal.address)">
							<image src="@/static/order/ico_copy.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="m-hotel-btns">
				<view class="m-hotel-btn" @click="makePhoneCall(detail.hotal.phone)">
					<image src="@/static/order/icon-mobile.png" mode=""></image>
					<text>联系酒店</text>
				</view>
				<view class="m-hotel-btn" @click="clickMap">
					<image src="@/static/order/dache.png" mode=""></image>
					<text>地图导航</text>
				</view>
			</view>
			<view class="m-title u-m-t-30">
				<text>入住信息</text>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>入住人：</text>
				</view>
				<view class="m-cell-right">
					<text>{{detail.customer_json.name || ''}}</text>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>手机号：</text>
				</view>
				<view class="m-cell-right">
					<text>{{detail.customer_json.phone || ''}}</text>
				</view>
			</view>
			<view class="m-cell" v-if="detail.crs_type == 3">
				<view class="m-cell-left">
					<text>日期：</text>
				</view>
				<view class="m-cell-right">
					<text>{{get_date('MM月DD日 HH:mm',detail.startTime)}} 至 {{get_date('MM月DD日 HH:mm',detail.endTime)}} {{detail.home_json.hour}}小时 </text>
				</view>
			</view>
			<block v-else>
				<view class="m-cell">
					<view class="m-cell-left">
						<text>日期：</text>
					</view>
					<view class="m-cell-right">
						<text>{{get_date('MM月DD日',detail.startTime)}} 至 {{get_date('MM月DD日',detail.endTime)}} {{detail.night_num}}晚 </text>
					</view>
				</view>
				<view class="m-cell">
					<view class="m-cell-left">
						<text>预计到店：</text>
					</view>
					<view class="m-cell-right">
						<text>{{detail.expect_time || ''}}</text>
					</view>
				</view>
			</block>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>房型：</text>
				</view>
				<view class="m-cell-right">
					<text>{{detail.home_json.title}} {{detail.num}}间</text>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>订房要求：</text>
				</view>
				<view class="m-cell-right">
					<text>{{detail.book_require || '不限'}}</text>
				</view>
			</view>
			<!-- <view class="m-cell">
			<view class="m-cell-left">
				<text>房间：</text>
			</view>
			<view class="m-cell-right">
				<text>支付后安排</text>
			</view>
		</view> -->
		</view>

		<view class="m-card u-m-t-20 u-p-t-30" style="border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
			<view class="m-title">
				<text>订单信息</text>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>订单号</text>
				</view>
				<view class="m-cell-right">
					<text>{{detail.orderId || ''}}</text>
				</view>
			</view>
			<view class="m-cell">
				<view class="m-cell-left">
					<text>下单时间</text>
				</view>
				<view class="m-cell-right">
					<text>{{detail.dtTime || ''}}</text>
				</view>
			</view>
			<view class="m-cell" v-if="detail.status ==-1">
				<view class="m-cell-left">
					<text>取消时间</text>
				</view>
				<view class="m-cell-right">
					<text>{{detail.qxTime || ''}}</text>
				</view>
			</view>
		</view>

		<view class="m-title u-m-t-30" v-if="detail.hotal.rules" style="margin-bottom: 0;">
			<text>预定提示：</text>
		</view>
		<view class="m-content">
			<u-parse :html="detail.hotal.rules || ''"></u-parse>
		</view>
		
		
		<!-- 订房须知 -->
		<u-popup v-model="show" :height="1200" mode="bottom" :closeable="true" :borderRadius="20">
			<view class="m-popup">
				<view class="m-popup-title">酒店政策</view>
				<view class="m-popup-content">
					<u-parse :html="detail.hotal.content || ''"></u-parse>
				</view>
			</view>
		</u-popup>


		<!-- 明细 -->
		<u-popup v-model="detailShow" mode="bottom" :closeable="true" :borderRadius="20">
			<view class="m-popup-detail" v-if="detail.home_info"> 
				<view class="m-popup-title">
					<text>费用明细</text>
				</view>
				<view class="m-popup-h3">
					<text>房费</text>
					<text style="color: #DE2C38;">￥{{detail.price}}</text>
				</view>
				<view class="m-popup-cell" v-for="(item,index) in detail.home_info" :key="index"> 
					<view class="">
						<text v-if="detail.crs_type != 3">{{get_date('YYYY-MM-DD',(new Date(item.Date)))}}</text>
						<text v-else>{{item.Hour}}小时</text>
						<text class="u-m-20">{{detail.num}}间</text>
					</view>
					<text>￥{{item.ActualPrice}}</text>
				</view>

				<view class="u-p-t-25"></view>
				<view class="m-popup-cell" v-if="detail.pay_json.vip_discount">
					<text>会员折上折</text>
					<text>-￥{{detail.pay_json.vip_discount.price}}</text>
				</view>
				<view class="m-popup-cell" v-if="detail.pay_json.yhq">
					<text>优惠券</text>
					<text>-￥{{detail.pay_json.yhq.price}}</text>
				</view>
			</view>
		</u-popup>
		
		<m-order-cancel ref="orderCancel" @cancel="cancelOrderFun"></m-order-cancel>
		
		<u-popup v-model="showHexiao" mode="center" border-radius="20">
			<view class="m-hexiao" v-if="codeInfo">
				<view class="m-hexiao-title">
					<text>核销码</text>
				</view>
				<view class="m-hexiao-content">
					<image :src="codeInfo.url" mode=""></image>
				</view>
				<view class="m-hexiao-text">
					<text>{{codeInfo.code}}</text>
				</view>
				<view class="m-hexiao-btn" @click="showHexiao = false">
					<text>确认</text>
				</view>
			</view>
		</u-popup>

		<view class="m-bottom safe-area-inset-bottom" v-if="detail.status == -5">
			<view class="m-bottom-btn" @click="cancelFun">
				<text>取消订单</text>
			</view>
			<view class="m-bottom-btn m-bottom-btn__extend" @click="submitPayFun">
				<text>立即支付</text>
			</view>
		</view>
		<view class="m-bottom safe-area-inset-bottom" v-if="detail.status == 2">
			<view class="m-bottom-btn" style="flex-direction: column;" @click="cancelFun">
				<view>取消订单</view>
				<view class="m-bottom-btn__qx">
					<text>取消订单提示:{{get_date('MM月DD日 HH点',detail.QxLimitTime)}}前</text>
				</view>
			</view>
		</view>
		<!-- <view class="m-bottom safe-area-inset-bottom" v-if="detail.status == 4 && detail.is_pingjia ==0">
			<view class="m-bottom-btn m-bottom-btn__extend" @click="to_link('/pages/order/evalForm?id='+ordersId)">
				<text>立即评价</text>
			</view>
		</view> -->
		<view class="m-bottom safe-area-inset-bottom" v-if="detail.status == 4">
			<view class="m-bottom-btn" @click.stop="to_link('/pages2/hotel-invoice-add/hotel-invoice-add?id='+ordersId)">
				<text>申请发票</text>
			</view>
			<view class="m-bottom-btn m-bottom-btn__extend" v-if="detail.status == 4 && detail.is_pingjia ==0" @click="to_link('/pages/order/evalForm?id='+ordersId)">
				<text>写评价</text>
			</view>
		</view>
		
		<view class="m-bottom safe-area-inset-bottom" v-if="detail.status == -1 ">
			<view class="m-bottom-btn m-bottom-btn__extend" @click="toHotelDetail()">
				<text>再次预订</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrdersInfo,
		cancelOrders
	} from "@/common/function/api_fun.js";
	import {
		getScoreText,
		get_timestamp,
		get_date,
		replaceText
	} from "@/common/function/tools.js"

	let systemInfo = uni.getSystemInfoSync();
	export default {
		data() {
			return {
				detail: {
					customer_json:{},
					guester_json:[],
					home_info:{},
					hotal:{}
				},
				ordersId: null,
				detailShow: false,
				show:false,
				showHexiao:false,
				codeInfo:null
			};
		},
		computed: {
			// 转换字符数值为真正的数值
			navbarHeight() {
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height + systemInfo.statusBarHeight;
			},
			getCountComputed() {
				return (item) => {
					let start = get_timestamp(item.startTime)
					let end = get_timestamp(item.endTime)
					let count = (end - start) / 24 / 60 / 60
					return count
				}
			}
		},
		onLoad(options) {
			this.ordersId = options.id
		},
		onShow() {
			this.getOrdersInfo();
		},
		methods: {
			get_date,
			replaceText,
			//跳转到详情页
			toHotelDetail() {
				wx.navigateTo({
					url: '/pages/list/detail?id=' + this.detail.hotalId + '&startDate=' + this.vuexStartDateObj.dateStr +
						'&endDate=' + this.vuexEndDateObj.dateStr,
				})
			},
			getCodeInfo(){
				this.$http.getJson('hotal_getCode',{id:this.ordersId}).then(res=>{
					if(res.code == 1){
						this.codeInfo = res.data
					}else{
						this.$m.msg(res.message)
					}
				})
			},
			cancelFun(){
				this.$refs.orderCancel.open(this.ordersId)
			},
			cancelOrderFun(id,remark){
				this.$http.getJson('hotal_cancelOrder',{
					order_id:id,
					cancel_reason:remark
				}).then(res=>{
					if(res.code === 1){
						this.$m.msg('取消成功')
						this.getOrdersInfo()
					}else{
						this.$m.msg(res.message)
					}
				})
			},
			openDetailFun(){
				this.detailShow = true
			},
			getOrdersInfo() {
				this.$http.getJson('hotal_orderInfo', {
					id: this.ordersId
				}).then(res => {
					if (res.code == 1) {
						this.detail = res.data
					} else {
						this.$m.msg(res.message, () => {
							this.to_back()
						})
					}
				})
			},
			submitPayFun() {
				this.$http.getJson('hotal_wxPay', {
					id:this.ordersId
				}).then(res => {
					uni.hideLoading()
					if(res.code == 1){
						this.$http.wx_pay(res.data).then(e => {
							if (e.errMsg == 'requestPayment:fail cancel' || e.errMsg ==
								'requestPayment:fail') {
								this.$m.msg('支付取消')
							} else {
								this.$m.msg('支付成功', () => {
									this.getOrdersInfo()
								})
							}
						})
					}else{
						this.$m.msg(res.message)
					}
				})
			},

			clickCopy(str) {
				uni.setClipboardData({
					data: str
				})
			},
			makePhoneCall(phone) {
				wx.makePhoneCall({
					phoneNumber: phone,
					success() {

					},
					fail() {

					}
				})
			},
			clickMap() {
				uni.openLocation({
					latitude: Number(this.detail.hotal.latitude),
					longitude: this.detail.hotal.longitude * 1,
					name:this.detail.hotal.title,
					address:this.detail.hotal.address,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f6f6f6;
	}

	.m-font1 {
		font-size: 36rpx;
		color: #33302D;
		font-weight: 800;
	}

	.m-font2 {
		font-size: 24rpx;
		color: #8F6F4C;
	}

	.m-font3 {
		font-size: 32rpx;
		color: #333;
	}

	.m-font4 {
		font-size: 26rpx;
		color: #2979ff;
	}

	.m-font5 {
		font-size: 26rpx;
		color: #333;
	}

	.m-head {
		position: relative;
		width: 750rpx;
		height: 400rpx;
		background: linear-gradient(179deg, #DBB579 0%, #FFFFFF 100%);
		box-sizing: content-box;

		.m-head-empty {
			position: absolute;
			width: 750rpx;
			height: 30rpx;
			bottom: 0;
			left: 0;
			border-radius: 20rpx 20rpx 0 0;
			background: #fff;
		}
	}

	.m-head-box {
		display: flex;
		flex-direction: column;
		padding: 0 25rpx;
		background: #FFFFFF;
		margin: 40rpx 25rpx 25rpx 25rpx;
		box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.m-head-font1 {
			font-size: 40rpx;
			color: #DE2C38;
			margin-left: 20rpx;

			&::before {
				content: '￥';
				font-size: 24rpx;
			}
		}

		.m-head-font2 {
			font-size: 24rpx;
			color: #ADA9A5;
		}

		.m-head-box__top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 115rpx;
			border-bottom: 1px solid #E6E2DE;

			.m-head-box__left {
				font-size: 28rpx;
				color: #33302D;
			}
		}

		.m-head-box__bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80rpx;

			.m-head-bottom__left {
				font-size: 24rpx;
				color: #33302D;
				width: 490rpx;
			}

			.m-head-bottom__right {}
		}
	}

	.m-text1 {
		display: flex;
		font-size: 28rpx;
		color: #999;
	}

	.m-text2 {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		color: #333;
	}

	.m-btn {
		display: flex;
		height: 90rpx;
		border: 1rpx solid #eee;
		border-radius: 8rpx;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.m-btn-extend {
		background: #fa3534;
		color: #fff;
		border: 1rpx solid #fa3534;
	}

	.m-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0rpx 25rpx 30rpx 25rpx;
		font-size: 32rpx;
		line-height: 45rpx;
		font-weight: 800;
		color: #333;
		.m-title-code{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #D3A358;
			width: 136rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			border: 2rpx solid #D3A358;
		}
	}

	.m-card {
		background: #fff;
		border-bottom-left-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		padding-bottom: 10rpx;
	}

	.m-hotel {
		display: flex;
		padding-left: 25rpx;

		.m-hotel-image {
			width: 140rpx;
			height: 140rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}

		.m-hotel-content {
			padding-top: 8rpx;
			padding-left: 30rpx;

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.m-hotel-title {
				font-size: 28rpx;
				color: #33302D;
				font-weight: 600;
				line-height: 40rpx;
				width: 470rpx;
			}

			.m-hotel-address {
				font-size: 24rpx;
				color: #76706B;
				line-height: 33rpx;
				max-width: 470rpx;
			}

			.m-hotel-copy {
				display: flex;
				align-items: center;
			}
		}
	}

	.m-hotel-btns {
		display: flex;
		justify-content: space-between;
		padding: 25rpx 0rpx 30rpx;
		width: 700rpx;
		margin-left: 25rpx;
		border-bottom: 1px solid #E6E2DE;

		.m-hotel-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 341rpx;
			height: 72rpx;
			background: #F6F6F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-size: 26rpx;
			color: #222;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
		}
	}

	.m-add {
		font-size: 26rpx;
		color: #333;
	}

	.m-row {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		flex: 1;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.m-cell {
		display: flex;
		padding: 0 25rpx 30rpx;
		line-height: 44rpx;

		.m-cell-left {
			width: 130rpx;
			font-size: 26rpx;
			color: #9B958F;
		}

		.m-cell-right {
			flex: 1;
			font-size: 26rpx;
			color: #33302D;
		}
	}

	.m-content {
		padding: 16rpx 25rpx 230rpx;
		font-size: 26rpx;
		color: #33302D;
		line-height: 40rpx;
	}

	.m-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		display: flex;
		align-items: center;
		box-sizing: content-box;
		width: 700rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0, 0, 0, 0.06);
		padding-left: 25rpx;
		padding-right: 25rpx;

		.m-bottom-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #E6E2DE;
			font-size: 32rpx;
			color: #9B958F;
			.m-bottom-btn__qx{
				font-size: 24rpx;
				color: #D3A358;
				margin-top: 5rpx;
			}
		}

		.m-bottom-btn__extend {
			background: #D3A358;
			border-color: #D3A358;
			color: #fff;
			margin-left: 20rpx;
		}
	}
	
	
	.m-popup-detail {
		padding-bottom: 200rpx;
	
		.m-popup-title {
			padding: 40rpx 0 30rpx 0;
			text-align: center;
			font-size: 36rpx;
			color: #33302D;
			font-weight: 600;
		}
	
		.m-popup-h3 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #33302D;
			font-weight: 600;
			padding: 30rpx 25rpx 25rpx;
		}
	
		.m-popup-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			color: #76706B;
			line-height: 40rpx;
			padding: 0 25rpx;
		}
	}
	
	.m-popup {
		padding: 40rpx 25rpx;
	
		.m-popup-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 36rpx;
			color: #33302D;
			font-weight: 600;
			line-height: 50rpx;
			margin-bottom: 60rpx;
		}
	
		.m-popup-h3 {
			font-size: 28rpx;
			color: #33302D;
			line-height: 40rpx;
			font-weight: 600;
			margin-bottom: 15rpx;
		}
	
		.m-popup-content {
			font-size: 26rpx;
			color: #76706B;
			line-height: 40rpx;
			margin-bottom: 40rpx;
		}
	}
	
	.m-hexiao{
		width: 660rpx;
		.m-hexiao-title{
			font-size: 34rpx;
			color: #222;
			font-weight: 800;
			text-align: center;
			padding: 40rpx 0 80rpx;
		}
		.m-hexiao-content{
			display: flex;
			justify-content: center;
			image{
				width: 240rpx;
				height: 240rpx;
			}
		}
		.m-hexiao-text{
			font-size: 60rpx;
			color: #222;
			text-align: center;
			margin-top: 20rpx;
			font-weight: 800;
		}
		.m-hexiao-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100rpx;
			border-top: 1px solid #DDDDDD;
			font-size: 32rpx;
			color: #D3A358;
			margin-top: 60rpx;
		}
	}
</style>